<!-- 高斯模糊 -->
<style type="text/css">
	.img{
		-webkit-filter: blur(5px);
		filter: blur(5px);
	}
	.img2{
		-webkit-filter:brightness(200%);
		filter:brightness(200%);
	}
	.img3{
		filter:contrast(200%);
	}
	.img4{ 
		/*第一个参数阴影往右移动的距离，第二个参数阴影往下移动的距离，第三个参数阴影的虚度*/
		filter: drop-shadow(8px 8px 10px red); 
	}
	.img5{
		filter: grayscale(50%)
	}
	.img6{
		filter: hue-rotate(90deg);
	}
	.img7{
		filter: invert(100%);
	}
	.img8{
		filter: saturate(800%);
	}
</style>
正常图片 <img  src="123.jpg">
模糊<img class="img" src="123.jpg">
<!-- 图片变亮or变暗 -->
变亮<img class="img2"  src="123.jpg">
<!-- 图片对比度 -->
对比度<img class="img3"  src="123.jpg">
<!-- 图像设置一个阴影效果: -->
阴影<img class="img4"  src="123.jpg">
<!-- 将图像转换为灰度图像: -->
灰度图像<img class="img5"  src="123.jpg">
<!-- 给图像应用色相旋转: -->
应用色相旋转<img class="img6"  src="123.jpg">
<!-- 反转输入图像: -->
反转输入图像:<img class="img7"  src="123.jpg">
<!-- 饱和度 -->
饱和度<img class="img8"  src="123.jpg">